import styled from 'styled-components';

export const PersonalInfo = styled.div`
   + div  .leftSection{
    padding-top: 0px!important;
   }
`
export const DetailsPosition = styled.div`
   display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
`
export const Top = styled.div`
    flex-grow: 1;
    display: flex;
    flex-direction: column;
`

export const Right = styled.div`
   display: flex;
   flex: 1;  
`

export const Left = styled.div`
   display: flex;
   flex: 1;  
`

export const LeftContent = styled.div<{ $leftWidth: number;$backgroundColor: string;$color?: string }>`
    width: 0;
    overflow: hidden;
    box-sizing: border-box;
    flex: ${({ $leftWidth }) => `1 ${$leftWidth}`};
    background-color: ${({ $backgroundColor }) => $backgroundColor};
    color: ${({ $color }) => $color}
`
